<template>
	<view class="container">
		<u-navbar
			:is-fixed="false"
			:border-bottom="false"
			:is-back="true"
			back-icon-name="arrow-leftward"
			title="认证"
			:background="{ background: '#fff' }"
			title-color="#000000"
		>
		</u-navbar>
		<u-toast ref="uToast" />
		<view v-if="preview">
			<image class="img" v-for="(img,index) in fileList" :key="index" :src="img"></image>
			<button class="submit" @click="reSubmit">{{btnName}}</button>
		</view>
		<view v-if="!preview">
			<u-upload :maxCount="3" ref="uUpload" :action="action" :file-list="fileList" ></u-upload>
			<button class="submit" @click="submit">上传</button>
		</view>
	</view>
</template>

<script>
import md5 from '@/utils/md5.js'
import { updatePass, getData, getPass } from '../../api/system/api'
export default {
	data() {
		return {
			action: 'http://127.0.0.1:3000/upload',
			fileList: [],
			preview: false,
			currentPass: {},
			btnName: ''
		}
	},
	mounted() {
		uni.getStorage({     
			key:'userInfo',
			success: (res) => {
				console.log(res)
				getPass({
          page: 1,
          pageSize: 10,
          userId: res.data.id
        }).then(pass => {
					console.log(pass)
					let allPass = pass.data.data
					let currentPass = allPass.filter(v => (v.cardno === res.data.cardno))[0]
					console.log(currentPass)
					this.currentPass = currentPass;
					let pics = JSON.parse(pass.data.data[0].pics)
					if (pics.length) {
						pics.forEach((v, i) => {
							pics[i] = `http://127.0.0.1:3000/${v}`
						})
						this.fileList = pics
						this.preview = true;
						if (currentPass.examine === 'fail') {
							this.btnName = '认证失败，重新上传'
						} else if (currentPass.examine === 'true') {
							this.btnName = '认证成功'
						} else {
							this.btnName = '审批中...'
						}
					}
				})
			}
		})
	},
	methods: {
		submit() {
			console.log(this.$refs.uUpload.lists)
			if (!this.$refs.uUpload.lists.length) {
				this.$refs.uToast.show({
					title: '请上传图片',
					type: 'error',
				})
				return
			}
			updatePass(this.currentPass.id, {
				pics: JSON.stringify(this.$refs.uUpload.lists.map(v => v.response.imgName))
			}).then(res => {
				if (res.code === 200) {
					this.$refs.uToast.show({
						title: '上传成功，请等待管理员审核',
						type: 'success',
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 500)
					
				} else {
					this.$refs.uToast.show({
						title: '上传失败',
						type: 'error',
					})
				}
			})
		},
		reSubmit() {
			if (this.btnName === '认证成功' || this.btnName === '审批中...') {
				return
			}
			this.preview = false;
			this.fileList = []
			this.form.pics = []
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	overflow: hidden;
	padding: 30rpx;

	.set-icon {
		vertical-align: middle;
		width: 41rpx;
		height: auto;
		margin-right: 35rpx;
	}
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;

	height: 90vh;
	width: 100%;

	.top {
		width: 100%;
	}

	.logo {
		display: block;
		width: 281rpx;
		height: auto;
		margin: 0 auto 60rpx;
	}

	.cell {
		width: 100%;
		padding: 0 85rpx;
		box-sizing: border-box;
		margin-top: 36rpx;

		.name {
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #3e4a59;
			line-height: 30rpx;
			opacity: 0.72;
		}

		.input-box {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #f6f6f6;
			display: flex;
			align-items: center;

			.code {
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #0d0d0d;
				line-height: 30rpx;

				text {
					// color: #14b9c8;
					color: #5f88ff;
				}
			}

			.ipt {
				flex: 1;
				// height: 24rpx;
				font-size: 24rpx;
			}

			.hold {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #3e4a59;
				line-height: 30px;
				opacity: 0.45;
			}
		}
	}

	.agree {
		margin: 27rpx 95rpx 0;
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #cacaca;
		line-height: 34rpx;

		.a {
			color: #000000;
		}
	}

	.submit {
		margin: 60rpx 90rpx 0;
		border: none;
		width: 572rpx;
		height: 86rpx;
		line-height: 86rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		background-color: #5f88ff;
		color: #ffffff;

		&::after {
			content: none;
		}

		&::before {
			content: none;
		}

		&[disabled='true'] {
			background: #e4e4e4;
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
.img {
	width: 300rpx;
	height: 300rpx;
	margin-right: 10rpx;
}
</style>
